

<template>
<div>
    <el-button type="primary"  @click="tianjia">添加</el-button>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                >
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
               >
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱">
        </el-table-column>
        <el-table-column
                prop=""
                label="操作">
            <template slot-scope="scope">
                <el-button type="danger" @click="del(scope.row)">删除</el-button>
                <el-button type="success" @click="xiugai(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="user" :model="userForm" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="userForm.age"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="gai">确定修改</el-button>
        </span>
    </el-dialog>

    <el-dialog
            title="添加"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
        <el-form ref="user" :model="userForm2" label-width="80px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="userForm2.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="userForm2.age"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm2.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="tian">确 定</el-button>
        </span>
    </el-dialog>

</div>
</template>

<script>
    export default {
        name: "student",
        data(){
            return {
                tableData:[],
                dialogVisible:false,
                dialogVisible2:false,
                userForm:{},
                userForm2:{},

            }
        },
        //页面加载完毕
        created() {
            this.initTable();
        },
        //定义方法得地方
        methods:{
            initTable(){
                this.$http.get("http://localhost:8001/user2/select2").then(resp=>{
                    if(resp.data.code==2000){
                        this.tableData=resp.data.data;
                    }
                })
            },
            del(row){
                axios.get("http://localhost:8001/user2/delete?id="+id).then(resp=>{
                    if(resp.data.code==2000){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            xiugai(){
                this.dialogVisible=true;
            },
            gai(){
                axios.post("http://localhost:8001/user2/update",this.userForm).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("修改成功")
                        this.dialogVisible=false;
                        this.initTable();
                    }
                    this.userForm={};
                })
            },
            tianjia(){
                this.dialogVisible2=true;
            },
            tian(){
                axios.get("http://localhost:8001/user2/insert",this.userForm2).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success(result.data.msg)
                        this.dialogVisible2=false;
                        this.initTable();
                    }
                    this.userForm2={};
                })
            },
        }
    }
</script>

<style scoped>

</style>